<template>
    <div class="news-details" @scroll = "scroll_y" id="scrolls">
        <Header></Header>
        <div class="headers">
            <div>
                <img src="../../../static/img/logo_1.png" alt="">
            </div>
            <h2>新闻资讯</h2>
        </div>
        <div class="content" >
            <div class="image">
                <router-link :to="{name:'NewsDetailsPage',params:{id:this.headerID}}"><img :src="this.headerImage" alt=""></router-link>
                <div class="title">
                    <router-link :to="{name:'NewsDetailsPage',params:{id:this.headerID}}">
                        <h3>{{this.headerTitle}}</h3>
                    </router-link>
                </div>
            </div>
            <div class="news-list"  
                v-infinite-scroll="loadMore" 
                infinite-scroll-disabled="loading" 
                infinite-scroll-distance="10">
                <div v-for="(newsDetailsLists, index) in newsDetailsList" :key="index">
                    <span class="bules"></span>
                    <h3>
                        <router-link :to="{name: 'NewsDetailsPage',params:{id:newsDetailsLists.id}}">{{newsDetailsLists.title}}</router-link>
                    </h3>
                    <span class="long"></span>
                </div> 
            </div>
        </div>
        <div class="fixeds" v-show="topShow" ref="viewBox">
            <a href="#">
                <img src="../../../static/img/back-top.png" alt="">
            </a>
        </div>
        <p>已经到最后了</p>
        <Interactive></Interactive>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '../productVideo/components/Header'
import Interactive from '../interactive/Interactive'
import Footer from '../home/components/Footer'
export default {
    name: 'NewsDetails',
    data(){
        return {
            newsDetailsList: [],
            headerImage: null,
            headerTitle: null,
            headerID: null,
            newsDetailsListTotal:null,
            topShow: true,
            pages: 1,
            
        }
    },
    components: {
        Header,
        Footer,
        Interactive
    },
    created(){
        this.axios.get('/articles/index',{
            params: {
                per_page: this.newsDetailsListTotal,
                page: 1,
                category:1
            }
        })
        .then((res) => {
            this.newsDetailsList = res.data.data;  
            let first = this.newsDetailsList.shift();
            this.headerImage = first.cover;
            this.headerTitle = first.title;
            this.headerID = first.id
            this.newsDetailsListTotal = res.data.meta.pagination.total;
            // console.log(res.data.data);
        })
        .catch((error) => {
            console.log(error);
        })
    },
    methods: {
        loadMore() {
           this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 2000);
            this.axios.get('/articles/index',{
                    params: {
                        per_page: 10,
                        page: this.pages + 1,
                        category:1
                    }
                })
                .then((res) => {
                    // this.newsDetailsList.push(res.data.data[0]);
                    this.newsDetailsList = this.newsDetailsList.concat(res.data.data);
                    this.pages++;
                    // console.log(this.pages);
                    // console.log(this.newsDetailsList);
                   
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        scroll_y(){
                // let scrolls = document.getElementById("scrolls");
                // let scrollTops = scrolls.scrollTop;
                // scrollTops = 200;
                // console.log(scrollTops);
                // console.log(el);
                this.box = this.$refs.viewBox;
                this.box.$el.addEventListener('scroll', () => {
                    console.log(this.$refs.viewBox.$el.scrollTop)
                    }, true)
                // if(window.scrollY>200){
                //     this.topShow = false;
                // }
        }
    }
}
</script>
<style scoped>
.news-details{
    width: 100%;
    height: auto;
    padding-bottom: .97rem;
}
.news-details .headers{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
    margin-top: .2rem;
}
.news-details .headers div{
    width: .53rem;
    height: .53rem;
    float: left;
    margin-left: .19rem;
}
.news-details .headers div img{
    width: 100%;
    height: auto;
}
.news-details .headers h2{
    font-size: .3rem;
    color: #fff;
    float: left;
    font-weight: bold;
}
.news-details .content{
    width: 100%;
    height: auto;
    margin-top: .3rem;
}
.news-details .content .image{
    width: 6.7rem;
    height: 3.88rem;
    position: relative;
    margin-left: .4rem;
}
.news-details .content .image img{
    width: 100%;
    height: auto;
}
.news-details .content .image .title{
    width: 100%;
    height: .8rem;
    background-color: rgba(195, 195, 195, 0.6);
    line-height: .8rem;
    position: absolute;
    bottom: .23rem;
    text-align: center;
}
.news-details .content .image h3{
   font-size: 14px;
   color: #fff;
   height: .7rem;
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
}
.news-details .content .news-list{
    margin-top: .2rem;
    margin-left: .4rem;
    width: 6.7rem;
    height: auto;
}
.news-details .content .news-list div{
    margin-top: .4rem;
    height: .32rem;
    line-height: .32rem;
}
.news-details .content .news-list div:nth-child(1){
    margin-top: 0;
}
.news-details .content .news-list div .bules{
    width: .1rem;
    height: .1rem;
    display: inline-block;
    background-color: #1d2977;
    border-radius: 50%;
    vertical-align: middle;
}
.news-details .content .news-list div .long{
    width: 6.7rem;
    border-bottom: .02rem solid #e8e8e8;
    display: block;
    margin-top: .15rem;
}
.news-details .content .news-list div h3{
    font-size: 14px;
    color: #333;
    display: inline-block;
    overflow: hidden;
    width: 6.34rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}
.news-details .fixeds{
    width: .7rem;
    height: .7rem;
    position: fixed;
    bottom: 2.5rem;
    right: .3rem;
}
.news-details .fixeds img{
    width: 100%;
    height: auto;
}
.news-details p{
  width: 100%;
  height: auto;
  text-align: center;
  font-size: .26rem;
  color: #1d2977;
  margin-top: .49rem;
  margin-bottom: .9rem;
}
@media screen and (max-width: 320px) and (min-width: 320px){
.news-details .content .news-list div h3{
    font-size: 14px;
    color: #333;
    display: inline-block;
    overflow: hidden;
    width: 6.34rem;
    height: .31rem;
    vertical-align: top;
}
} 
</style>
